<template>
  <AddLeaveInfo @addData1ListItem="addData1ListItem"></AddLeaveInfo>
  <div>
    <div>
      <el-table :data="dataa.tableData" style="width: 100%">
        <!-- 姓名 -->
        <el-table-column label="姓名">
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top">
              <template #reference>
                <el-tag>{{ scope.row.username }}</el-tag>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <!-- 请假理由 -->
        <el-table-column label="请假理由">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span>{{ scope.row.leavereason }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 开始时间 -->
        <el-table-column label="开始时间">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span>{{ proxy.$filters.timeFormat(scope.row.start) }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 结束时间 -->
        <el-table-column label="结束时间">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon><timer /></el-icon>
              <span>{{ proxy.$filters.timeFormat(scope.row.end) }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- 附件 -->
        <el-table-column label="附件">
          <template #default="scope">
            <el-image
              v-if="scope.row.extend"
              style="width: 100px; height: 100px"
              :src="'api/' + scope.row.extend.split(',')[0]"
              :preview-src-list="scope.row.extend.split(',').map((item:any)=>'api/'+item)"
              :initial-index="4"
              :preview-teleported="true"
              fit="cover"
            />
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="状态">
          <template #default="scope">
            <el-button
              size="small"
              v-if="scope.row.type == 0"
              type="danger"
              @click="show(scope)"
              >不太行
            </el-button>
            <el-button size="small" v-if="scope.row.type == 1"
              >待审批</el-button
            >
            <el-button size="small" type="success" v-if="scope.row.type == 2"
              >已同意
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import AddLeaveInfo from "../components/leaveView/AddLeaveInfo.vue";
import { leavelist } from "@/service/leaveService";
import { onBeforeMount, getCurrentInstance, reactive } from "vue";
const { proxy }: any = getCurrentInstance();
let show = (val: any) => {};
onBeforeMount(async () => {
  const { data } = await leavelist({});
  if (data.code == 200) {
    dataa.tableData = data.list;
  }
});
let dataa = reactive<any>({
  tableData: [],
});
let addData1ListItem = (item: any) => {
  console.log("jaosdoasjdosajdoasjdoasjdoj ");
  dataa.tableData.push(item);
  console.log(dataa.tableData);
};
</script>
